<template>
	<view class="index">
		<uni-nav-bar fixed="true" @clickLeft="back" left-icon="back" title="选择商品" status-bar="true" background-color="#e60012" color="#fff">
			<view slot="right" class="submit" @tap="submit()">完成</view>
		</uni-nav-bar>
		<view class="page-body">
			<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'">
				<view class="nav-left-item" @tap="categoryClickMain(item,index)" :key="index" :class="index==cateIndex?'active':''"
				    v-for="(item,index) in topCates">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="nav-right" scroll-y  @scroll="scroll" :style="'height:'+height+'px'" scroll-with-animation>
				
				<view class="son-cate">
					<view class="son-item" v-for="(item,index) in topCates[cateIndex]['goods']" :key="index">
						<view class="img">
							<image :src="item.original_image" mode=""></image>
						</view>
						<view class="info">
							<view class="goods-name">{{item.goods_name}}</view>
							<view class="price">
								<view class="text-danger">￥{{item.shop_price}}</view>
								<switch color="#4cd964" :checked="item.select_status ? true : false" @change="switchGoods(item)" />
							</view>
						</view>
					</view>
					
				</view>
				
				
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar.vue';
	import banner from '../../components/banner.vue';
	import uniIcon from '../../components/uni-icon.vue';
	import Request from '../../common/request.js';
	
	export default {
		components: {
			uniNavBar, banner, uniIcon
		},
		data() {
			return {
				topCates: [{
					goods:[]
				}],
				cateIndex: 0,
				selectIds: [],
				delIds: [],
			}
		},
		
		methods: {
			
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			categoryClickMain(categroy, index) {
				this.cateIndex = index;
				
				this.scrollTop = -this.scrollHeight * index;
				
				this.getGoods();
			
			},
			//获取分类 
			getCategory: function() {
				var that = this;
				var pararms = {
					url: 'category/index',
					sCallback: function(res) {
						console.log(res)
						that.categoryList = res.data.category;
						that.bannerList = res.data.banners;
						that.getSubCategory(0);
						uni.stopPullDownRefresh();
					}
				}
				
				Request.send(pararms);
				
			},
			//获取二级分类
			getSubCategory: function(index){
				if(this.categoryList[index]['sub_class']){
					return false;
				}
				var pid = this.categoryList[index]['id'];
				var that = this;
				var pararms = {
					url: 'category/getSonCategory',
					data: {id: pid},
					sCallback: function(res) {
						
						that.categoryList[index]['sub_class'] = res.data;
						that.subCategoryList = res.data;
						
					}
				}
				
				Request.send(pararms);
			},
			//去商品列表
			toList: function(item) {
				uni.navigateTo({
					url: '/pages/category/goods?id='+item.id+'&title='+item.name
				})
			},
			//获取一级分类
			getTopCate: function(){
				var that = this;
				Request.send({
					url: 'category/index',
					sCallback: function(responsive) {
						if(responsive.data.category.length > 0) {
							responsive.data.category.forEach(function(item){
								item.goods = [];
							});
							that.topCates = responsive.data.category;
							that.getGoods();
						}
					}
				})
			},
			//获取一级分类下的子分类
			getGoods: function(){
				var that = this;
				//没有商品才请求
				if(this.topCates[this.cateIndex]['goods'].length > 0) {
					return false;
				}
				
				var cid = this.topCates[this.cateIndex]['id'];
				var url =  'usershop/getCategoryGoods';
				
				Request.send({
					url: url,
					data: {id: cid},
					sCallback: function(res) {
						var goods = res.data;
						if(goods.length > 0) {
							goods.forEach(function(item){
								item.select_status = item.select_status == 1?true:false;
								item.old_status = item.select_status;
							})
						}
						that.topCates[that.cateIndex]['goods'] = goods;
					}
				})
			},
			//切换选择商品
			switchGoods: function(goods){
				// console.log(goods)
				goods.select_status = !goods.select_status;
				//原来没选，现在选
				if(goods.old_status == false && goods.select_status == true) {
					this.selectIds.push(goods.id);
				} else if(goods.old_status == false && goods.select_status == false) {
					this.selectIds.splice(this.selectIds.indexOf(goods.id), 1);
				} else if(goods.old_status == true && goods.select_status == true) {
					this.delIds.splice(this.delIds.indexOf(goods.id), 1);
				} else {
					this.delIds.push(goods.id);
				}
			},
			//提交
			submit: function(){
				var data = {
					del_ids: this.delIds.toString(),
					select_ids: this.selectIds.toString()
				}
			
				if(!data.del_ids && !data.select_ids) {
					Request.alert('请选择商品');return;
				}

				var that = this;
				
				Request.send({
					url: 'usershop/selectGoods',
					data: data,
					sCallback: function(res) {
						uni.showToast({
							title: res.msg,
							success() {
								uni.navigateBack({
									
								})
							}
						})
					}
				})
			},
			back() {
				uni.navigateBack({
					
				})
			}
		},
		onLoad: function () {
			this.getTopCate();		
			this.height = uni.getSystemInfoSync().windowHeight;					
		},
		onReady:function(){
			// this.categoryClickMain(this.categoryList[0], 0);
		}
	}
</script>

<style>
	.index{
		/* padding-top: 44px; */
	}
	
	.uni-navbar-header .submit{
		font-size: 24upx;
	}
		
	.page-body {
		display: flex;
		
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 200upx;
		background: #F4F4F4;
	}

	.nav-left-item {
		height: 90upx;
		font-size: 26upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-left: 4upx solid #F4F4F4;
		color: #333;
	}
	
	.nav-left-item.active{
		color: #FC3F78;
		border-color: #FC3F78;
		background: #fff;
	}

	.nav-right {
		width: 550upx;
		background: #fff;
	}
	
	.nav-right-box{
		margin-top: 10upx;
	}
	
	.son-name{
		font-size: 28upx;
		padding: 20upx;
	}
	
	.son-item{
		display: flex;
		flex-direction: row;
		padding: 20upx;
		border-bottom: 1upx solid #eee;
		font-size: 24upx;
		align-items: center;
	}
	
	.son-item image{
		width: 100upx;
		height: 100upx;
	}
	
	.son-item .info{
		padding-left: 20upx;
		flex: 1;
		color: #666;
	}
	
	.son-item .info .goods-name{
		margin-bottom: 10upx;
	}
	
	.son-item .info .price{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.active {
		color: #007AFF;
	}
</style>
